<template>
  <div class="app-container">
    <!-- echarts -->

    <!-- echarts 01 -->
    <el-card>
      <el-row>
        <el-col :span="10">
          <div class="warp">
            <div class="title">总业绩</div>
            <div id="chart01" style="width: 800px; height: 400px"></div>
          </div>
        </el-col>

        <el-col :span="10" :offset="1">
          <div class="warp">
            <div class="title">个人业绩</div>
            <div id="chart02" style="width: 800px; height: 400px"></div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 渠道相关 -->
    <el-card>
      <div class="actual-list">
        <div
          class="actual-list-item"
          v-for="(item, index) in dataList01"
          :key="index"
        >
          <div class="warp">
            <div class="actual-list-item-name">
              {{ item.title }}
            </div>
            <div class="actual-list-item-value">
              <div>
                <div class="actual-list-item-value-number">
                  {{ item.count }}
                </div>
                <div class="actual-list-item-value-unit">
                  {{ item.unit }}
                </div>
              </div>
              <img src="@/assets/images/line.png" />
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { initColumnChart } from "@/utils/EchartsUtils";

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.7",
      gradientColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: "#0CAEFD" },
        { offset: 1, color: "#0D6EF3" },
      ]),

      dataList01: [
        { title: "渠道总数", count: 1200, unit: "条" },
        { title: "渠道业绩", count: 1200, unit: "条" },
        { title: "渠道单数", count: 1200, unit: "条" },
      ],
    };
  },
  created() {},
  mounted() {
    this.initChart01();
    this.initChart02();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },

    /* 生成第一个echart */
    initChart01() {
      let chart01 = {
        series: [120, 200, 150, 80, 70, 110, 130],
        nameList: ["金额/元"],
        categories: ["张一", "张二", "张三", "张四", "张五", "张六", "张七"],
      };
      initColumnChart(chart01, "chart01", 0, this.gradientColor);
    },

    initChart02() {
      let chart01 = {
        series: [120, 200, 150, 80, 70, 110, 130],
        nameList: ["金额/元"],
        categories: ["张一", "张二", "张三", "张四", "张五", "张六", "张七"],
      };
      initColumnChart(chart01, "chart02", 0, this.gradientColor);
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.warp {
  .title {
    text-align: center;
  }
}

.actual-list {
  // width: 200px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  // padding-left: 20%;
  .actual-list-item {
    display: inline-flex;
    align-items: center;
    color: #333;
    width: 300px;
    height: 40px;
    margin-top: 10px;
    flex-wrap: nowrap;

    .warp {
      // width: 300px;
      display: flex;
      flex-wrap: nowrap;
    }
    .actual-list-item-name {
      font-size: 18px;
      // width: 220px;
      line-height: 30px;
    }
    .actual-list-item-value {
      width: 220px;
      position: relative;
      justify-content: center;
      display: flex;
      img {
        margin-top: 20px;
        position: absolute;
        left: -10px;
        top: 5px;
      }
      > div {
        display: flex;
      }
      .actual-list-item-value-lable {
        font-size: 12px;
      }
      .actual-list-item-value-number {
        font-size: 30px;
        color: #0c9afd;
        font-weight: bold;
        line-height: 15px;
      }
      .actual-list-item-value-unit {
        font-size: 16px;
        color: #333;
        line-height: 30px;
        margin-left: 20px;
      }
    }
  }
}
</style>
